<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>我的简历是一个引导响应式网站</title>
<!--mobile apps-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Resume Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--mobile apps-->
<!--Custom Theme files-->
<link rel="shortcut icon" href="images/your_ico.ico" type="image/x-icon">
<link rel="icon" href="images/your_ico.ico" type="image/x-icon">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/swipebox.css">
<!--//Custom Theme files-->
<!--js-->
<script src="js/jquery-1.11.1.min.js"></script> 
<!-- //js -->
<!--web-fonts-->
<!--<link href='//fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>-->
<!--<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>-->
<!--//web-fonts-->
<!--start-smooth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<style>
	.asde{
		width: 100%;
	}
</style>
<!--//end-smooth-scrolling-->
</head>
<body>
	<!--banner-->
	<div id="home" class="banner">
		<div class="banner-info">
			<div class="container">
				<div class="col-md-4 header-left">
					<img src="images/me.jpg" alt=""/>
				</div>
				<div class="col-md-8 header-right">
					<h2>Hello</h2>
					<h1>欢迎来到我的网站</h1>
					<h6>H5前端开发设计人员---李飞的网站</h6>
					<ul class="address">
						<li>
							<ul class="address-text">
								<li><b>出生日期</b></li>
								<li>2002-12-21</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>联系电话 </b></li>
								<li>18338305714</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>居住地址 </b></li>
								<li>河南省郑州市荥阳市崔庙镇</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>个人邮箱 </b></li>
								<li>2719375695@qq.com</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//banner-->
	<!--top-nav-->
	<div class="top-nav wow">
		<div class="container">
			<div class="navbar-header logo">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					导航
				</button>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<div class="menu">
					<ul class="nav navbar">
						<li><a href="#about" class="scroll">关于我</a></li>
						<li><a href="#skills" class="scroll">专业技能</a></li>
						<li><a href="#projects" class="scroll">部分作品</a></li>
						<li><a href="#contact" class="scroll">联系我</a></li>
					</ul>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>	
	<!--//top-nav-->
	<!--about-->
	<div id="about" class="about">
		<div class="container">
			<h3 class="title"> 关于我</h3>
			<div class="col-md-8 about-left">
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;具有较强的用户研究、市场分析能力，对中国用户的社会形态、生活方式有丰富的认识和独特的见解;对色彩、材质感觉细腻而敏感，具有色彩、材质、表面处理的研究和趋势分析能力，对当代中国的色彩具有深入的理解和自己的观点;能够准确把握社会文化、流行趋势，对中国现代社会及传统文化背景有仔细的研究和深刻的理解;对设计工作充满热情，有较强的设计能力，设计的产品范围广泛。</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;熟悉服装制作的基础知识，懂得人体结构理论，对服装面料，辅料性质有足够的认识，精通服装制作过程及工艺、成本构成。熟悉服装企业的接单报价排单流程，生产排期流程，制作工艺流程，验货程序标准等。手绘功底深，工作积极性高，为人热情，乐于助人，沟通能力较强，拥有创新思维、有团队精神并能承受较大的工作压力。</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拥有多年的工业设计经验，经过时间的积累和沉淀已经有了自己的设计技巧和风格，性格低调，比较细心，责任感强，有进取心，诚实可靠。有很强的团队合作意识和一定的领导能力，具有良好的手绘能力,思维敏锐，学习能力、表达能力出众。</p>
			</div>
			<div class="col-md-4 about-right">
				<ul>
					<h5>项目经历</h5>
					<li><span class="glyphicon glyphicon-menu-right" ></span> 医院通用网站</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> 商城项目</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> 外卖app模拟</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> ..................................... </li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//about-->
	<!--work-experience-->
	<!--//work-experience-->
	<!--education-->
	<!--//education-->
	<!--skills-->
	<div id="skills" class="skills">
		<div class="container">
			<h3 class="title">专业技能</h3>
			<div class="skills-info">
				<div class="col-md-6 bar-grids">
					<h6>html  <span> 90% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 90%">
						</div>
					</div>
					<h6>css<span> 90% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 90%">
						</div>
					</div>
					<h6>js<span>80% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 80%">
						</div>
					</div>
					<h6>jquery <span> 75% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
				</div>
				<div class="col-md-6 bar-grids">
					<h6>node <span> 75% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
					<h6>移动端适配<span> 95% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 95%">
						</div>
					</div>
					<h6>gulp<span>80% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 80%">
						</div>
					</div>
					<h6>vue<span> 60% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 60%">
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//education-->
	<!--portfolio-->
	<div id="projects" class="portfolio">
		<div class="container">
			<h3 class="title wow zoomInLeft animated" data-wow-delay=".5s">部分作品</h3>
			<div class="sap_tabs">			
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list wow fadeInUp animated" data-wow-delay=".7s">
						<li class="resp-tab-item"><span>html</span></li>
						<li class="resp-tab-item"><span>js</span></li>
						<li class="resp-tab-item"><span> node</span></li>
						<li class="resp-tab-item"><span>vue</span></li>
						<li class="resp-tab-item"><span>项目</span></li>
					</ul>	
					<div class="clearfix"> </div>	
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/xm.png" alt="" class="img-responsive" />
										<div class="figcaption">
											<h3>小米商城<span></span></h3>
											<p>利用css模仿小米商城</p>
										</div>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid effect-sarah">
										<img src="images/xg.png" alt="" class="img-responsive" />
										<div class="figcaption">
											<h3>西瓜视屏<span></span></h3>
											<p>利用css模仿西瓜视屏</p>
										</div>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid effect-sarah">
										<img src="images/mf.png" alt="" class="img-responsive" />
										<div class="figcaption">
											<h3>蜜蜂剪辑<span></span></h3>
											<p>利用css模仿蜜蜂剪辑</p>
										</div>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/g5.jpg" alt="" class="img-responsive" />
										<div class="figcaption">
											<h3>js<span></span></h3>
											<p>js 开发</p>
										</div>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
											<img src="images/g6.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>js<span></span></h3>
												<p>js开发</p>
											</div>
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
											<img src="images/g7.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>js<span> Project</span></h3>
												<p>js开发</p>
											</div>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/shuqi.png" alt="" class="img-responsive" />
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/xinlang.png" alt="" class="img-responsive" />
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/activea.png" alt="" class="img-responsive" />
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/shuqi.png" alt="" class="img-responsive" />
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/xinlang.png" alt="" class="img-responsive" />
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<img src="images/activea.png" alt="" class="img-responsive" />
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<a href="https://li_fie.gitee.io/cla/#/">
										<div class="grid">
											<img src="images/shop.png" alt="" class="img-responsive" />
										</div>
									</a>
								</div>
								<div class="col-md-4 portfolio-grids">
									<a href="https://li_fie.gitee.io/cctv-a/#/">
										<div class="grid">
											<img src="images/yiyuan.png" alt="" class="img-responsive" />
										</div>
									</a>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--ResponsiveTabs-->
			<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$('#horizontalTab').easyResponsiveTabs({
						type: 'default', //Types: default, vertical, accordion           
						width: 'auto', //auto or any width like 600px
						fit: true   // 100% fit in a container
					});
				});		
			</script>
			<!--//ResponsiveTabs-->
			<!-- swipe box js -->
			<script src="js/jquery.swipebox.min.js"></script> 
				<script type="text/javascript">
					jQuery(function($) {
						$(".swipebox").swipebox();
					});
			</script>
			<!-- //swipe box js -->
		</div>
	</div>
	<!--//portfolio-->
	<!--contact -->
	<div class="welcome contact" id="contact">
		<div class="container">
			<h3 class="title">联系我</h3>
			<div class="contact-row ">
				<div class="col-md-6 asde">
					<div class="address-left">
						<p>河南省郑州市荥阳市崔庙镇</p>
					</div>
					<div class="address-right">
						<p>电话 : 1833805714</p>
						<p>E-mail : <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=OwoLDg0MAwgIDgJ7SkoVWFRW" target="_blank">2719375695@qq.com</a></p>
					</div>
					<div class="clearfix"></div>
					<div class="contact-form">
						<form action="#" method="post">
							<input type="text" name="Name" placeholder="您的名字" required="">
							<input class="email" name="Email" type="text" placeholder="您的邮箱" required="">
							<input class="phone" name="phone" type="text" placeholder="您的联系方式" required="">
							<textarea name="Message" placeholder="内容" required=""></textarea>
							<input type="submit" value="提交" >
						</form>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//contact -->
	<!--footer-->
	<!--//footer-->
	<!--smooth-scrolling-of-move-up-->
	<script type="text/javascript">
		$(document).ready(function() {
		
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
	<!--//smooth-scrolling-of-move-up-->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>